import Qt 4.7

// Delegate for the detail list
Component {

    BorderImage {
        id: backgroundImage
        source: listViewMouseArea.pressed ? "pics/listitem_pressed.png" : "pics/listitem.png"
        width: parent.width
        border.bottom: 5
        border.top: 5
        border.left: 5
        border.right: 30

        property int fontHeight: 30
        property int itemMargin: 10

        // Photo
        Image {
            id: imagePhoto
            source: photo
            anchors.verticalCenter: textName.verticalCenter
            x: -width
        }

        // Name
        Text {
            id: textName
            anchors.left: imagePhoto.right
            anchors.leftMargin: itemMargin
            anchors.verticalCenter: parent.verticalCenter
            text: name
            font.pixelSize: fontHeight
            style: Text.Raised
        }

        // Number
        Text {
            id: textNumber
            anchors.left: imagePhoto.right
            anchors.leftMargin: itemMargin
            anchors.top: textName.bottom
            text: number
            font.pixelSize: fontHeight
            style: Text.Raised
            opacity: 0
        }

        MouseArea {
           id: listViewMouseArea
           anchors.fill: parent

           onClicked: {
               expandingListView.currentIndex = index
           }
        }

        states: [
            // When item is current, make the item higher and show photo+number
            State {
                name: "current"
                when: expandingListView.currentIndex == index
                PropertyChanges {
                    target: textNumber
                    opacity: 1
                }
                PropertyChanges {
                    target: backgroundImage
                    height: listViewItemHeight + fontHeight
                }
                PropertyChanges {
                    target: imagePhoto
                    x: itemMargin
                }
                AnchorChanges {
                    // Don't center the name vertically when in expanded state
                    target: textName
                    anchors.verticalCenter: undefined
                }
            }
        ]

        // When moving to "current" state, first enlarge the item and scroll everything into
        // place, only after this make the phone number visible. When leaving the state do the
        // same effects but backwards.
        transitions: [
            Transition {
                to: "current"
                SequentialAnimation {
                    PropertyAnimation { properties: "height,x"; duration: 200; easing.type: Easing.InOutCubic }
                    PropertyAnimation { properties: "opacity"; duration: 200; easing.type: Easing.InOutCubic }
                }
            },
            Transition {
                from: "current"
                SequentialAnimation {
                    PropertyAnimation { properties: "opacity"; duration: 200; easing.type: Easing.InOutCubic }
                    PropertyAnimation { properties: "height,x"; duration: 200; easing.type: Easing.InOutCubic }
                }
            }
        ]
    }
}
